<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/request.js"></script>

    <!--  script标签 也会发送http请求到src指定的url  => 返回响应的文本  -->
    <!-- type="text/javascript"  将请求来的文本作为js语句解析  -->
    <!-- php接口返回的是json字符串 => 在script脚本中,将请求来的文本作为js语句解析  => JS对象 =>无法解析 -->
    <!-- <script type="text/javascript"
        src="http://192.168.58.247/2210_php/jsonp/searchOrderLimit.php?wd=&col=id&type=asc&page=1&size=10"></script> -->

    <!-- 
        {status,message,maxPage,total,current,list}   => 
     -->






</head>

<body>
</body>
<script>


    // 跨域方法2:  Jsonp
    // 原理: 引入资源不受同源策略的限制(可以跨域访问) => 一个服务器的前端可以引入另一个服务器的 img css js

    // 前端: 提供函数的声明
    // 对方服务器后端: 以函数形式返回数据

    // 前端提供函数声明 + script动态请求后端接口=>返回函数调用 =>  执行既定的函数

    // 优点:
    // 1. 通过创建script脚本向后端接口发送http请求 => 相较于ajax的代码 => 代码更加简单
    // 2. jsonp 请求数据时 速度快 效率高


    // 缺点:
    // 1. script脚本载入内容时 只能发送get请求, 不能发送post请求 => Jsonp不支持post
    // 2. jsonp 请求数据时, 不安全  => 参数数据容器被看到/修改   携带数据量较少(4k)


    function searchOrderLimitCallback(data) {
        console.log("函数执行:", data);
    }


    function Jsonp(options) {//options = {url,data,jsonp,jsonpCallback}

        var { url, data = "", jsonp = "cb", jsonpCallback = "fn" } = options;

        var script = document.createElement("script");
        // script.src = `http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php?wd=&col=id&type=asc&page=1&size=10&cb=searchOrderLimitCallback`;

        if (data) {
            if (data instanceof Object) { // 判断数据是否是纯对象 (有问题!后续补充)

                var list = [];

                for (var key in data) {
                    var val = data[key];
                    list.push(`${key}=${val}`);
                }
                // console.log(list);

                data = list.join("&");

                // console.log(data);
            }

            script.src = url + "?" + data;
            if (jsonp && jsonpCallback) {
                script.src += `&${jsonp}=${jsonpCallback}`
            }
        } else {
            script.src = url;
            if (jsonp && jsonpCallback) {
                script.src += `?${jsonp}=${jsonpCallback}`
            }
        }



        // script 在没有放到页面中之前 都是存储在内存当中 => 并不会发送请求 => 
        document.body.append(script);
        script.onload = function () {
            console.log("脚本加载完毕");
            this.remove();
        }

    }

    Jsonp({
        url: "http://192.168.58.247/2210_php/jsonp/searchOrderLimitCallback.php",
        data: {
            wd: "",
            col: "id",
            type: "asc",
            page: 1,
            size: 10,
        },
        jsonp: "cb",
        jsonpCallback: "searchOrderLimitCallback",
    })




</script>


</html>